Design System

atomic design

• Atom(원자)

  • 물질의 기본 빌딩 블록
  • 웹 인터페이스에 적용
  • 폼의 텍스트 레이블, 인풋 필드, 버튼과 같은 HTML 태그
  • 컬러 팔레트, 폰트, 애니메이션과 같은 인터페이스
  • 의미가 없음

  

• Molecules(분자)

  • 원자그룹
  • 폼의 텍스트 레이블, 인풋필드, 버튼의 조합 폼(form)으로 구성되어 결합하면 실제로 무엇인가 할 수 있음
  • 의미가 있음
  • “한 가지만 하고 그것만 잘 해라”

  

• Organisms(유기체)

  • 작업할 수 있는 빌딩 블록을 제공
  • 분자들을 결합하여 유기체를 형성할 수 있음
  • 최종 인터페이스가 어떻게 보이는지 시작하는 단계
  • 로고, 메인 네비게이션, 검색, 소셜 미디어 채널 리스트
  • 컴포넌트가 독립적이고 기동성이 있고 재사용이 가능함

  

• Templates

  • 최종 결과물에 더 작합한 언어
  • 레이아웃이 실제로 구동하는지 볼 수 있음
  • 구체적임

  

참조: Atomic Design Methodology Atomic Design